﻿<template>
  <div class = 'header_rightInfo clear'>
    <div class = 'header_iconContent left'>
      <!-- 查看消息通知的按钮 -->
      <span @click = 'messageDrawer.visible = true'>
        <el-badge :value = 'notificationCount' :max = "99" title = '点击查看消息通知'><i class='iconfont icon-185078emailmailstreamline'></i></el-badge>
      </span>
      <!-- 查看版本信息的按钮 -->
      <span @click = 'versionDrawer.visible = true' style = 'padding: 0 20px' title = '版本风格设置'><i class = 'iconfont icon-shezhi'></i></span>
    </div>
    <el-menu class = 'header_basicMenu left' mode = 'horizontal' @select = 'handleCommand'>
      <el-submenu index = "2" popper-class = 'header_popMenu'>
        <template slot = 'title'>
          <img class = "headerUser" :src = "avatar ? avatar : 'static/style/common/images/defaultUser.png'" alt="">
          <span>{{userName}}</span>
        </template>
        <el-menu-item index = 'changePwd'>
          <i class = "iconfont icon-lock"></i>
          <span>修改密码</span>
        </el-menu-item>
        <el-menu-item index = 'logout'>
          <i class = "iconfont icon-logout"></i>
          <span>退出登录</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 退出登录的弹窗 -->
    <V-Logout :isShow = 'logout_dialog_visible' @giveUp = "logout_dialog_visible = false" @sureLogout = "sureLogout"></V-Logout>
    <!-- 修改密码 -->
    <V-Change :dialogFormVisible = 'changePwd_dialog_visible' @giveUpChange = 'changePwd_dialog_visible = false' @sureChange = 'changePwd_dialog_visible = false'></V-Change>
    <!-- 点击消息的icon弹窗所有的消息列表 -->
    <el-drawer :title = 'messageDrawer.title' :visible.sync = 'messageDrawer.visible' :direction = 'messageDrawer.direction' custom-class = 'self_drawer'
    :size = 'messageDrawer.size' append-to-body>
      <ul class = 'drawer_messageList'>
        <!-- <li v-for = 'item in 1000' :key = 'item'>{{item}}</li> -->
        <li class = 'no_notifition' v-if = '!notificationArray.length'>
          <img src = "static/style/common/images/noWork.png" alt="">
          <p>暂无消息通知</p>
        </li>
        <li v-for = 'item in notificationArray' :key = 'item.uid'>
          {{item.title}}
        </li>
      </ul>
    </el-drawer>
    <!-- 点击设置按钮，展示当前ui的相关信息（包括切换风格等信息） -->
    <el-drawer :title = 'versionDrawer.title' :visible.sync = 'versionDrawer.visible' :direction = 'versionDrawer.direction' custom-class = 'self_drawer'
    :size = 'versionDrawer.size' :with-header = 'false' append-to-body>
      <div class = 'drawer_versionInfo'>
        <p class = 'drawer_versionInfo_title'>系统版本信息</p>
        <p>ICP快发框架版本号：{{versionInfo.icp_version}}</p>
        <p>底层EFFC框架版本号：{{versionInfo.effc_version}}</p>
        <p>ICP快发框架UI版本号：{{versionInfo.ui_version}}</p>
      </div>
      <!-- 布局展示 -->
      <div class = 'drawer_layoutInfo'>
        <p class = 'drawer_layoutInfo_title'>系统布局配置</p>
        <ul class = 'drawer_layoutInfo_list clear'>
          <li v-for = 'item in layoutArray' :key = 'item.layoutName' :class = "currentThemeWatch === item.layoutName ? 'active' : ''"
          @click = "item.layoutName === currentThemeWatch ? '' : changeCurrentTheme(item.layoutName)">
            <img :src = "item.layoutIcon" alt = "">
            <p>{{item.layoutTitle}}</p>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 更换密码的组件
import VChange from './TheChangePwd.vue'
// 退出登录的弹窗
import VLogout from './TheLogout.vue'
// 切换样式的jswenjian
import setTheme from '../../../static/js/setTheme.js'
export default {
  components: {
    VChange, VLogout
  },
  data () {
    return {
      // 修改密码
      changePwd_dialog_visible: false,
      // 退出登录
      logout_dialog_visible: false,
      // 消息通知
      notificationCount: null,
      notificationArray: [],
      // 点击消息的icon弹出所有的消息列表
      messageDrawer: {
        visible: false,
        title: '消息通知',
        direction: 'rtl',
        size: '400px'
      },
      // 点击设置的icon,显示风格和版本信息
      versionDrawer: {
        visible: false,
        title: '版本风格设置',
        direction: 'rtl',
        size: '400px'
      },
      // 版本信息
      versionInfo: {
        // ICP快发框架的版本号
        icp_version: '',
        // 底层EFFC框架版本号
        effc_version: '',
        // ui版本号
        ui_version: $URL.UI_VERSION
      },
      // 消息通知获取的定时器
      timer: null,
      timeInterver: 300000,
      // 页面布局的列表
      layoutArray: [
        {
          layoutName: 'theme_default',
          layoutIcon: 'static/style/common/images/theme_default.png',
          layoutTitle: '风格一'
        },
        {
          layoutName: 'theme_default_007cc2',
          layoutIcon: 'static/style/common/images/theme_default_007cc2.png',
          layoutTitle: '风格二'
        },
        {
          layoutName: 'theme_dark',
          layoutIcon: 'static/style/common/images/theme_dark.png',
          layoutTitle: '风格三'
        }
      ]
    }
  },
  computed: {
    userName: function () {
      return this.$store.state.userName
    },
    currentThemeWatch: function () {
      return this.$store.state.currentTheme
    },
    avatar: function () {
      let avatarUrl = this.$store.state.avatar
      if (avatarUrl === 'undefined') {
        return ''
      }
      avatarUrl = (avatarUrl && avatarUrl.indexOf('/dl/') !== -1) ? avatarUrl.replace('/dl/', '/') : avatarUrl
      return avatarUrl
    }
  },
  created () {
    // 获取版本信息
    this.getVersionInfo()
    // 每隔一段时间获取未读站内信
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.timer = window.setInterval(() => {
      this.getUnreadMessage()
    }, this.timeInterver)
  },
  // 销毁时，清除定时器
  destroyed () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 修改密码和退出登录的下拉
    handleCommand (key) {
      if (key === 'changePwd') {
        this.changePwd_dialog_visible = true
      } else if (key === 'logout') {
        this.logout_dialog_visible = true
      }
    },
    // 获取版本信息
    getVersionInfo () {
      this.$get('/version').then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.versionInfo.icp_version = dataResult.data.icp_version
          this.versionInfo.effc_version = dataResult.data.effc_version
        } else {
          this.$emssage({
            message: dataResult.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取当前登录者的未读站内信
    getUnreadMessage () {
      this.$get('/innermsg/mine').then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.notificationArray = dataResult.data
          this.notificationCount = dataResult.data.length || null
        } else {
          this.$emssage({
            message: dataResult.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 标记站内信已读
    setMessageRead (uid, index) {
      this.$patch('/innermsg/' + uid + '/read').then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.notificationCount = this.notificationCount < 2 ? null : (this.notificationCount - 1)
          this.notificationArray.splice(index, 1)
        } else {
          this.$emssage({
            message: dataResult.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 切换皮肤
    changeCurrentTheme (themeName) {
      this.versionDrawer.visible = false
      this.$store.dispatch('changeCurrentTheme', themeName)
      this.$nextTick(() => {
        setTheme(themeName)
      })
    },
    // 确定退出登录
    sureLogout () {
      this.logout_dialog_visible = false
      this.$router.push('/')
      this.$store.dispatch('logout')
    }
  }
}
</script>
